<template>
  <div class="q-pa-md">
    <t-btn color="purple" label="Account Settings">
      <t-menu>
        <div class="row no-wrap q-pa-md">
          <div class="column">
            <div class="text-h6 q-mb-md">Settings</div>
            <t-toggle v-model="mobileData" label="Use Mobile Data" />
            <t-toggle v-model="bluetooth" label="Bluetooth" />
          </div>

          <t-separator vertical inset class="q-mx-lg" />

          <div class="column items-center">
            <t-avatar size="72px">
              <img src="https://cdn.quasar.dev/img/avatar4.jpg" />
            </t-avatar>

            <div class="text-subtitle1 q-mt-md q-mb-xs">John Doe</div>

            <t-btn
              color="primary"
              label="Logout"
              push
              size="sm"
              v-close-popup
            />
          </div>
        </div>
      </t-menu>
    </t-btn>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        mobileData: ref(true),
        bluetooth: ref(false),
      };
    },
  };
</script>
